<template>
	<view class="sideMenuWorp">
		<view class="sideMenu">
			<view class="header">
				<image class="logo" src="@/static/image/home/logo.png" mode=""></image>
				<view class="MuaicTitle">
					音乐
				</view>
                <view class="rowBox">
                	<view class="Call">
                		<view class="text">
                			328
                		</view>
						<view class="Illustrate">
							歌曲
						</view>
                	</view>
					<view class="Call">
						<view class="text">
							328
						</view>
						<view class="Illustrate">
							商务
						</view>
					</view>
					<view class="Call">
						<view class="text">
							328
						</view>
						<view class="Illustrate">
							艺术家
						</view>
					</view>
                </view>
			</view>
			<view class="containerBox">
				<image src="../../../static/image/home/paint.png" class="icons" mode=""></image>
				<view class="containerBoxTest">
					铃声剪辑器
				</view>
			</view>
			<view class="containerBox">
				<image src="../../../static/image/home/jiandao.png" class="icons" mode=""></image>
				<view class="containerBoxTest">
					睡眠定时器
				</view>
			</view>
			<view class="containerBox">
				<image src="../../../static/image/home/sleep.png" class="icons" mode=""></image>
				<view class="containerBoxTest">
					均衡器
				</view>
			</view>
			<view class="containerBox">
				<image src="../../../static/image/home/sound-bars.png" class="icons" mode=""></image>
				<view class="containerBoxTest">
					驾驶模式
				</view>
			</view>
			<view class="containerBox">
				<image src="../../../static/image/home/Dirve.png" class="icons" mode=""></image>
				<view class="containerBoxTest">
					隐藏文件夹
				</view>
			</view>
			<view class="containerBox">
				<image src="../../../static/image/home/file.png" class="icons" mode=""></image>
				<view class="containerBoxTest">
					扫描媒体
				</view>
			</view>
			<view class="containerBox">
				<image src="../../../static/image/home/scan.png" class="icons" mode=""></image>
				<view class="containerBoxTest">
			       Themes
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
           bindTopSide(){
			    this.$emit("SideMenuClick")
		   }
		}
	}
</script>

<style lang="scss" scoped >
	.sideMenuWorp {
         width: 500rpx;
		 height: 100%;
		.sideMenu {
			width: 100%;
			background: rgba(16, 18, 29, 1);
			height: 100%;
			box-shadow: 11px 3px 14px  rgba(0, 0, 0, 0.68);
		}
		.header {
			width: 100%;
			height: 422rpx;
			overflow: hidden;
			margin: 0 auto;
            background-color: #272B36;
			.logo {
				width: 134rpx;
				height: 148rpx;
				display: block;
				margin: 0 auto;
				margin-top: 54rpx;
			}
			.MuaicTitle{
				width: 100%;
				color: $app-text-color;
				text-align: center;
				margin-top: 20rpx;
				font-size: 14px;
				color: rgba(255, 255, 255, 1);
			}
		}
		.containerBox {
			width: 80%;
			margin-left: 20%;
			height: 80rpx;
			opacity: 1;
			border-bottom: 1rpx solid $app-text-color-20;
			position: relative;
			margin-top: 20px;
			display: flex;
			.icons{
				width: 40rpx;
				height: 36rpx;
				position: absolute;
				left: -65rpx;
				top: 25rpx;
			}
			.containerBoxTest{
				  color: $app-text-color;
				  padding-left: 20rpx;
				  display: flex;
				  align-items: center;
				  font-size: 28rpx;
			}
		}
		.rowBox{
			width: 90%;
			height: 100rpx;
			display: flex;
			justify-content: center;
            align-items: center;
			margin: 0 auto;
			.Call{
				width: 33%;
				height: 100%;
				margin-top: 60rpx;
				.text{
					 display: flex;
					 align-items: center;
					 justify-content: center;
					 font-size: 24rpx;
					 font-weight: 400;
					 color: rgba(193, 192, 192, 1);
				}
				.Illustrate{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(193, 192, 192, 1);
					margin-top: 4rpx;
				}
			}
		}
	}
</style>